<template>
  <div>
    <el-row class="m10" :gutter="10">
      <el-col :span="12">
        <el-button type="success" icon="el-icon-circle-plus" class="bt" @click="handleAddCommunity">创建社区</el-button>
        <el-table v-loading="loading_1" :data="communityList" class="mt20">
          <el-table-column label="序号" type="index" width="55" align="center" />
          <el-table-column label="名称" align="center" prop="name" />
          <el-table-column label="操作" align="center" width="200px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-arrow-right"
                @click="changeCommunity(scope.row)"
              >切换</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" icon="el-icon-user-solid" class="bt" @click="handleApply">申请加入社区</el-button>
        <el-table v-loading="loading_2" :data="applyList" class="mt20">
          <el-table-column label="序号" type="index" align="center" />
          <el-table-column label="社区" align="center" prop="communityName" />
          <el-table-column label="部门 / 房间" align="center" prop="deptName" />
          <el-table-column label="备注" align="center" prop="remarks" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="deleteApply(scope.row)"
              >撤销</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 创建社区对话框 -->
    <el-dialog title="创建社区" :visible.sync="open_1" width="60%" append-to-body>
      <el-form ref="form_1" :model="form_1" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="userId">
          <el-input v-model="form_1.name" placeholder="请输入社区的名称" />
        </el-form-item>
        <el-form-item label="占地面积" prop="floorSpace">
          <el-input v-model="form_1.floorSpace" placeholder="请输入占地面积" />
        </el-form-item>
        <el-form-item label="建筑面积" prop="coveredArea">
          <el-input v-model="form_1.coveredArea" placeholder="请输入建筑面积" />
        </el-form-item>
        <el-form-item label="开发商" prop="developers">
          <el-input v-model="form_1.developers" placeholder="请输入开发商" />
        </el-form-item>
        <el-form-item label="物业公司" prop="propertyCompany">
          <el-input v-model="form_1.propertyCompany" placeholder="请输入物业公司" />
        </el-form-item>
        <el-form-item label="地区" prop="province">
          <v-distpicker :province="form_1.province" :city="form_1.city" :area="form_1.area" @selected="selectedArea" />
        </el-form-item>
        <el-form-item label="详细地址" prop="addr">
          <el-input v-model="form_1.addr" placeholder="请输入详细地址" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加申请 -->
    <el-dialog title="申请加入社区" :visible.sync="open_2" width="60%" append-to-body>
      <el-form ref="form_2" :model="form_2" :rules="rules_2" width="500px" label-width="80px">
        <el-form-item label="社区" prop="communityId">
          <el-select v-model="form_2.communityId" filterable placeholder="请选择" style="width: 70%">
            <el-option
              v-for="item in selectCommunityList"
              :key="item.communityId"
              :label="item.name + ' —— ' + item.addr"
              :value="item.communityId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <div @click="getTreeSelect">
            <treeselect v-model="form_2.deptId" :options="deptOptions" :show-count="true" placeholder="请选择" />
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitApply">确 定</el-button>
        <el-button @click="cancelApply">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { changeUserCommunityId, getUser } from '../api/system/user'
import { listCommunity, addCommunity, listOtherCommunity, listAllCommunity } from '../api/system/community'
import { listApplyCurrent, updateApply, addApply } from '../api/system/apply'
import { treeselectByCId, treeselect } from '../api/system/dept'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Treeselect from '@riophae/vue-treeselect'

export default {
  name: 'Index',
  components: { Treeselect },
  data() {
    return {
      applyList: [],
      communityList: [],
      loading_1: false,
      open_1: false,
      loading_2: false,
      open_2: false,
      // 创建社区变量
      // 表单参数
      form_1: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: '社区名称不能为空', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '省不能为空', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '市不能为空', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '县、区不能为空', trigger: 'blur' }
        ],
        addr: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' }
        ]
      },
      // 添加申请变量
      form_2: {
        id: null,
        userId: null,
        communityId: null,
        deptId: null,
        roleIds: null,
        postIds: null,
        status: '0',
        remarks: null
      },
      // 表单校验
      rules_2: {
        communityId: [
          { required: true, message: '社区不能为空', trigger: 'blur' }
        ],
      },
      // 尚未加入社区的列表
      selectCommunityList: [],
      // 部门树选项
      deptOptions: undefined
    }
  },
  created() {
    this.getCommunity()
    this.getApply()
  },
  methods: {
    // 获取所管理的社区
    getCommunity() {
      this.loading_1 = true
      listCommunity().then(response => {
        this.communityList = response.rows
      })
      this.loading_1 = false
    },
    // 获取申请的列表
    getApply() {
      this.loading_2 = true
      listApplyCurrent(this.form_2).then(response => {
        this.applyList = response.rows
        this.loading_2 = false
      })
    },
    // 获取全部社区的列表
    getSelectCommunityList() {
      listAllCommunity().then(response => {
        this.selectCommunityList = response.rows
      })
    },
    /** 切换社区 **/
    changeCommunity(community) {
      this.$confirm('是否切换为【' + community.name + '】小区', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 修改用户中的当前社区id
        changeUserCommunityId(community.communityId).then(response => {
          this.$message('请重新登录')
          // 修改成功后退出
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/index'
          })
        })
      })
    },
    handleAddCommunity() {
      this.reset()
      this.open_1 = true
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form_1'].validate(valid => {
        if (valid) {
          addCommunity(this.form_1).then(response => {
            this.msgSuccess('新增成功')
            this.open_1 = false
            this.getCommunity()
          })
        }
      })
    },
    // 取消按钮
    cancel() {
      this.open_1 = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form_1 = {
        communityId: null,
        name: null,
        userId: null,
        floorSpace: null,
        coveredArea: null,
        developers: null,
        propertyCompany: null,
        createTime: null,
        province: null,
        city: null,
        area: null,
        addr: null,
        delFlag: null
      }
      this.resetForm('form_1')
    },
    // 选择省市区触发事件
    selectedArea(data) {
      this.form_1.province = data.province.value
      this.form_1.city = data.city.value
      this.form_1.area = data.area.value
    },
    // 打开申请社区对话框
    handleApply() {
      this.resetApply()
      this.getSelectCommunityList()
      this.open_2 = true
    },
    // 重置申请表单
    resetApply() {
      this.form_2 = {
        id: null,
        userId: null,
        communityId: null,
        deptId: null,
        roleIds: null,
        postIds: null,
        status: '0',
        remarks: null
      }
      this.resetForm('form_2')
    },
    // 获取部门树
    getTreeSelect() {
      if (this.form_2.communityId === null) {
        this.$message.warning('请先选择社区')
      } else {
        treeselectByCId(this.form_2.communityId).then(response => {
          this.deptOptions = response.data
          console.log(this.deptOptions)
        })
      }
    },
    // 取消申请
    cancelApply() {
      this.resetApply()
      this.deptOptions = undefined
      this.open_2 = false
    },
    // 提交申请
    submitApply() {
      this.$refs['form_2'].validate(valid => {
        if (valid) {
          addApply(this.form_2).then(response => {
            this.msgSuccess('申请已提交')
            this.getApply()
            this.open_2 = false
          })
        }
      })
    },
    // 撤销申请
    deleteApply(apply) {
      this.resetApply()
      const queryParams = {
        id: apply.id,
        status: '3'
      }
      this.$confirm('是否确认撤销【' + apply.communityName + '】的申请?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return updateApply(queryParams)
      }).then(() => {
        this.msgSuccess('撤销成功')
        this.getApply()
      })
    }
  }
}
</script>

<style>
  .bt {
    width: 100%;
    height: 50px;
  }
</style>
